<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cont{width: 1000px;border: solid 1px black;margin: 0 auto;overflow: hidden;}
    .cont .box{float: left;border: solid 1px black;box-sizing: border-box;width: 250px;}
    .cont .box>img{width: 80%;height:200px;display: block;margin: 4px auto;}
    .cont .box .imgs{width: 100%;height: 40px;}
    .cont .box .imgs img{width: 40px;height:40px;float: left;}
    .cont p{margin: 5px 0;}
    .cont p:nth-of-type(1){height: 40px;line-height: 20px;overflow: hidden;}
    .cont .tags{width: 100%;height: 20px;}
    .cont .tags span{float: left;margin: 0 2px;padding: 2px;font-size: 12px;color: #fff;}

    tbody img{width: 40px;height: 40px;}
    tbody input{width: 40px;}
  </style>
</head>
<body>
  <div class="cont"></div>

  <table width="700" border="1">
    <thead>
      <tr>
        <th>图片</th>
        <th>名称</th>
        <th>价格</th>
        <th>数量</th>
        <th>总价</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      
    </tbody>
  </table>
</body>
<script src="./data.js"></script>
<script>
  // 选择器
  const cont = document.querySelector(".cont");
  const tbody = document.querySelector("tbody");

  // 模拟异步获取数据
  setTimeout(()=>{
    // goods为所有商品数据

    // 渲染页面结构
    var str = "";
    for(var i=0;i<goods.length;i++){
      str += '<div class="box" data-id="'+ goods[i].id +'"><img src="'+ goods[i].imgs[0].big +'" alt=""><p>'+ goods[i].name +'</p><p>价格：'+ goods[i].price +'</p><p>店家：'+ goods[i].shop +'</p><p>销量：'+ goods[i].tip +'</p><input type="button" class="addCart" value="加入购物车"></div>';
    }
    cont.innerHTML = str;
  }, 1);

  // 购物车数据
  const cartData = [];

  // 采用事件委托给页面上暂时不存在的元素绑定事件
  cont.onclick = function(eve){
    if(eve.target.className === "addCart"){
      // 获取当前点击商品的id
      const id = eve.target.parentNode.dataset.id
      // 从原有购物车数据中查看本次点击的商品是否是新商品
      let i=0;
      const flag = cartData.some((val,idx)=>{
        i = idx
        return val.id === id
      })
      if(flag){
        // 如果是老商品，数量++
        cartData[i].num++
      }else{
        // 新商品，直接push
        cartData.push({id, num:1})
      }
    }

    // 准备渲染购物车
    let str = "";
    // 遍历总数据
    goods.forEach(val=>{
      // 遍历购物车数据
      cartData.forEach(val2=>{
        // 比对id
        if(val.id === val2.id){
          // 拼接页面结构
          str += `<tr data-id="${val.id}">
                    <td><img src="${val.imgs}" alt=""></td>
                    <td>${val.name}</td>
                    <td>${val.price}</td>
                    <td><input type="number" value="${val2.num}"></td>
                    <td>${val.price * val2.num}</td>
                    <td>删除</td>
                  </tr>`
        }
      })
    })
    // 放入指定容器
    tbody.innerHTML = str;
  }


  // 以上代码转成面向对象语法

  // 继续往之后的功能思考


</script>
</html>